<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>Friends</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-down-outline"></ion-refresher-content>
  </ion-refresher>

  <!-- Important Friends -->
  <ion-grid>
    <ion-row>
      <ion-col size="6">
        <ion-button color="light">
          <ion-icon slot="start" name="scan-outline"></ion-icon>
          <ion-text>
            Сканировать QR
          </ion-text>
        </ion-button>
      </ion-col>
      <ion-col size="6">
        <ion-button color="light">
          <ion-icon slot="start" name="person-add-outline"></ion-icon>
          <ion-text>
            Добавить друга
          </ion-text>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- Important Friends -->
  <ion-list lines="none">
    <ion-list-header lines="none">
      <ion-label style="margin-top: 0;">Важные</ion-label>
    </ion-list-header>
    <ion-item button detail="false" *ngFor="let friend of importantFriends" [routerLink]="[friend.id]"
      routerdirection="forward">
      <ion-avatar slot="start">
        <img [src]="friend.avatar">
      </ion-avatar>
      <ion-label>
        <h2>{{friend.first_name}} {{friend.last_name}}</h2>
        <p>{{friend.city}}</p>
      </ion-label>

      <ion-buttons slot="end">
        <ion-button>
          <ion-icon slot="icon-only" name="chatbubble-outline" color="primary"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-item>
  </ion-list>

  <!-- Friends -->
  <ion-list lines="none">
    <ion-list-header lines="none">
      <ion-label>
        Мои друзья
        <small>
          <ion-text color="medium">15</ion-text>
        </small>
      </ion-label>
      <ion-button>
        Список
        <ion-icon name="chevron-down-outline" size="small" color="primary"></ion-icon>
      </ion-button>
    </ion-list-header>

    <ion-button fill="clear" color="medium" style="height: 32px;">
      Сортировка: По умолчанию
      <ion-icon name="swap-vertical-outline" size="small" style="margin-left: 8px;"></ion-icon>
    </ion-button>

    <ion-item button detail="false" *ngFor="let friend of friends" [routerLink]="[friend.id]" routerdirection="forward">
      <ion-avatar slot="start">
        <img [src]="friend.avatar">
      </ion-avatar>
      <ion-label>
        <h2>{{friend.first_name}} {{friend.last_name}}</h2>
        <p>{{friend.city}}</p>
      </ion-label>

      <ion-buttons slot="end">
        <ion-button>
          <ion-icon slot="icon-only" name="chatbubble-outline" color="primary"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-item>
  </ion-list>
</ion-content>